<template>
  <div>
    <el-card>
      <el-form :model="story" label-width="100px">
        <el-form-item label="故事ID">
          <el-input v-model="story.storyVO.id" disabled></el-input>
        </el-form-item>
        <el-form-item label="用户ID">
          <el-input v-model="story.storyVO.simpleUserInfoVO.userId" disabled></el-input>
        </el-form-item>
        <el-form-item label="用户昵称">
          <el-input v-model="story.storyVO.simpleUserInfoVO.nickname" disabled></el-input>
        </el-form-item>
        <el-form-item label="用户头像">
          <el-image :src="story.storyVO.simpleUserInfoVO.avatar" fit="cover"></el-image>
        </el-form-item>
        <el-form-item label="故事标题">
          <el-input v-model="story.storyVO.title" disabled></el-input>
        </el-form-item>

        <el-form-item label="故事内容">
          <!-- 展示后端的、有格式的数据 -->
          <div ref="editor"></div>
        </el-form-item>

        <el-form-item label="创建时间">
          <el-input v-model="story.storyVO.createTime" disabled></el-input>
        </el-form-item>

        <!-- 审核组件 -->
        <el-form-item label="审核状态">
        <el-select v-model="auditStatus" placeholder="请选择">
          <el-option label="通过" value="2"></el-option>
          <el-option label="驳回" value="3"></el-option>
        </el-select>
        </el-form-item>
        <el-form-item v-if="auditStatus === '3'" label="拒绝原因">
          <el-input v-model="rejectReason" placeholder="请输入拒绝原因"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitAudit">提交审核</el-button>
          <el-button @click="getNext">下一条</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import E from 'wangeditor'
import axios from 'axios'

export default {
  data () {
    return {
      // 当前的信息
      story: {
        // 审核编号
        id: '',
        storyVO: {
          id: '',
          simpleUserInfoVO: {
            userId: '',
            nickname: '',
            avatar: ''
          },
          title: '',
          content: '',
          createTime: ''
        }
      },

      // 用于存储编辑器的实例
      editor: null,

      // 内容类型：帖子-2；故事-3；头像-5
      contentType: 3,

      auditStatus: '', // 当前选择的审核状态
      rejectReason: '' // 拒绝原因
    }
  },

  mounted () {
    // 一进入页面就创建编辑器
    this.initEditor()
  },

  created () {
    // 一进入页面就展示数据
    this.getContent()
  },

  methods: {
    // 创建编辑器
    initEditor () {
      const editor = new E(this.$refs.editor)

      // 在创建编辑器之前设置配置
      editor.readOnly = true

      // 创建编辑器
      editor.create()

      // 保存编辑器实例到组件的 data 中
      this.editor = editor
    },

    // 后端获取数据
    async getContent () {
      try {
        const response = await axios.get(`http://localhost:8080/pixington/audit/content/getOne/${this.contentType}`)
        if (response.data.code === 0) {
          // 后端数据返回前端
          this.story = response.data
          // 确保编辑器已创建
          if (this.editor) {
            // 把文章内容显示到编辑器中
            this.editor.cmd.do('insertHTML', this.story.storyVO.content)
          } else {
            console.error('编辑器尚未创建')
          }
        }
      } catch (error) {
        // 处理网络或其他错误
        console.error(error)
      }
    },

    // 如果没有审核，就不允许跳过
    getNext () {
      // 提交前先判断
      if (!this.auditStatus) {
        this.$message({
          message: '请先审核',
          duration: 2000,
          type: 'warning'
        })
      }
      this.getContent()
    },

    // 提交审核
    async submitAudit () {
    // 提交前先判断
      if (!this.auditStatus) {
        this.$message({
          message: '请先审核',
          duration: 2000,
          type: 'warning'
        })
        return
      }
      if (this.auditStatus === '3' && !this.rejectReason) {
      // console.log(this.auditStatus)
        this.$message({
          message: '请填写拒绝原因',
          duration: 2000,
          type: 'warning'
        })
        return
      }
      try {
      // 传输的数据
        const data = {
          id: this.currentData.id,
          status: this.auditStatus,
          rejectReason: this.auditStatus === '3' ? this.rejectReason : ''
        }
        const res = await axios.get('http://localhost:8080/pixington/audit/content', data)
        if (res.data.code === 0) {
        // 提交后获取下一条记录
          this.getContent()

          this.$message({
            message: '审核成功',
            type: 'success'
          })
        } else {
        // 处理错误情况
          this.$message({
            message: '审核失败',
            type: 'error'
          })
        }
      } catch (err) {
      // 网络请求错误处理
        console.error(err)
        this.$message({
          message: err.msg,
          type: 'error'
        })
      }
    }
  }

}
</script>

<style>
/* 隐藏 */
.w-e-toolbar{
  display: none;
}
/* 补充上边框 */
.w-e-text{
  border: 1px solid #c9d8db;
  pointer-events: none;
}
</style>
